<template>
    <div class="container">
        
        
        <div class="goods-wrappe">
            <div class="goods-item" v-for="(item, index) of goodsList" :key="index">
                <div class="goods-img">
                    <img :src="avatar" alt="">
                </div>
                <div class="goods-title"> {{item.name}} </div>
                <div class="goods-price">
                    <span class="pricc"> {{item.price}} </span>
                    <span class="market"> {{item.marketPrice}} </span>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import { selectPage } from '@/api/Goods/'
    import { Icon, Toast } from "vant";
    import { mapGetters } from 'vuex'
    import avatar from "../../assets/images/avatar.jpeg";

    export default {
        name: "Discovery",
        components: {
            [Icon.name]: Icon,
            [Toast.name]: Toast
        },
        data() {
            return {
                goodsList: [],
                avatar
            };
        },
        computed: {
            ...mapGetters(['userinfo'])
        },
        created() {
            this.getGoodsList()
        },
        methods: {
            getGoodsList() {
                selectPage().then(response => {
                    console.log(response)
                    this.goodsList = response.data.data.list
                })
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/styles/common.scss";
    

    .container{
        box-sizing: border-box;
        padding: px2rem(10);

        .goods-wrappe{
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

            .goods-item{
                border: 1px solid red;
                display: flex;
                flex-direction: column;
                flex: 0 1;
                min-width: px2rem(170);
                margin: 0 px2rem(3) px2rem(10) px2rem(3);

                .goods-img{
                    width: 100%;
                    height: px2rem(150);
                    margin-bottom: px2rem(3);
                    img{
                        height: 100%;
                        width: 100%;
                    }
                }

                .goods-title{
                    height: px2rem(40);
                    display: -webkit-box;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    font-size: 32rpx;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp:2;
                }
            }
        }
    }
</style>